Get it

Downloads:

• Javascript
• CSS
• HTML

Copypastas:

Javascript

CSS

HTML

Use it

In the element with name=archive, you create objects in the following format:

path/to/image.jpg
# tag, comma separated, other tag
attribute=content
key: value

You can tag images either using # or tags:

The difference between key: value and attribute=content is that attributes are your typical HTML attributes!

There are three important "keys" to have in mind, other than the tags one: title and caption.

title: Title of Image
caption: A description that can be super long or super short.
  You can go to the next line if you want, it'll start a new paragraph, but don't skip a line or it'll stop capturing the caption.
  <strong>You may use HTML here.</strong>
isYoutube: true

Instead of caption, you can also use description or details, but at the end of the day it's the same paragraph.

Don't include isYoutube at all if you're not linking a youtube video. To properly embed a YouTube video, click on the "Share" button under the video, then go to "Embed" and copy the given iframe's src URL.

There are two attributes that do not affect the image directly:

class=class1 class2 class-3
title=lil popup thing

The classes are added to the "card" article that holds the image, so if you wanted to reference the image in your CSS with that class, you'd look for .class img.

The title attribute is that little popup that sometimes appears when you hover over links, and that affects the "View" and "Download" links.

Otherwise, attributes will affect the image. Don't add quotation marks!

An example of an image:

<pre name=archive hidden>

gifs/balloons.gif
  # red, yellow, blue, green
  title: Balloons
  caption:
    An eternal line of balloons rise toward their death.
    They evade my hand running to the blaze.
  class = balloony float
  width=200
  height=200

</pre>
<div name=gallery></div>

Which should result in:

<pre name=archive hidden>(…)</pre>
<div name=gallery>
<article id="image-gifs-balloons-gif" class="card balloony float">
  <img src="gifs/balloons.gif" width="200" height="200">
  <h1 class="title">Balloons</h1>
  <ul class="taglist">
    <li class="tag"><a href="?find=red">red</a></li>
    <li class="tag"><a href="?find=yellow">yellow</a></li>
    <li class="tag"><a href="?find=blue">blue</a></li>
    <li class="tag"><a href="?find=green">green</a></li>
  </ul>
  <a href="gifs/balloons.gif" download="balloons.gif" class="download"><span>Download</span></a>
  <div class="caption">
    <p>An eternal line of balloons rise toward their death.</p>
    <p>They evade my hand running to the blaze.</p>
  </div>
</article>
</div>

Which looks like:

Balloons

• red
• yellow
• blue
• green

Download

An eternal line of balloons rise toward their death.

They evade my hand running to the blaze.

Customize

There's not much to customize in this one. And I think the options are pretty self-explanatory! To customize, make an object called GALLERY like so:

<script>
GALLERY = {
  path: '',
  
  masonry: 0,
  masonry_direction: 'vertical',
  
  images_per_page: 24,  
  
  max_width: '50vw',
  max_height: '50vw',
  
  min_width: '180px',
  max_width: '180px',
  
  grid_gap: 24,
  
  max_pagination_links: 9,

  grid_card_layout:
    ['image','title','tags'],
  
  view_card_layout:
    ['image','title','tags','download','description']
}
</script>

path: ''

By default an empty string, it can be changed to the name of the folder/directory where you keep all your images. If you plan to have images from different folders or even from other websites, you should leave it empty.

masonry: 0

This page better explains masonry and ways to go about it, but it's essentially an uneven grid that makes it so the space between each item is about the same while its items are of different sizes. You can change this to 1 or true to turn it on.

masonry_direction: 'vertical'

The flow of masonry. By default, 'vertical'. Options include: 'vertical', 'horizontal', and 'both'. Though the first two options indeed work appropriately, using 'both' makes the "cards" look scattered (very fun, but looks unorganized).

images_per_page: 24

By default, a maximum of 24 results are shown per search page, though you could make it as many as 1000000000000000000..... Load time will vary.

max_width: '50vw'

max_height: '50vw'

The maximum width and height of "cards" in the grid. A "card" contains the image and tags, etc. The use of these measurements varies by grid layout.

min_width: '180px'

min_height: '180px'

The minimum width and height of "cards" in the grid. The use of these measurements varies by grid layout.

grid_gap: 24

In pixels, the gap or space between "cards" in the search page/grid.

max_pagination_links: 9

The pagination can have up to this number of links until it becomes a select tool (to save up on space). If you'd rather have the select tool at all times, just change it to 0 or 1.

grid_card_layout: ['image','title','tags']

view_card_layout: ['image','title','tags','download','description']

An array of strings; the layout of "cards", to choose the order in which an element appears in a "card", or if it appears at all. These accept the following:

• 'image' – the image,
• 'title' – the image title,
• 'tags' – a list of tags,
• 'download' – a download link,
• 'description' – the caption .

Note that 'download' does not show up in the search page.

  Find_tags: 'Find tag(s): ',
  Search_mode: 'Search mode: ',
  Search_OR: 'OR',
  Search_AND: 'AND',
  Avoid_tags: 'Avoid tag(s): ',
  
  Showing_results: ['Showing results ',' of '],
  See_all_tags: 'See all tags',
  Prev_page: 'Prev',
  Page: 'Page: ',
  Next_page: 'Next',
  
  Prev_result: '← Prev',
  Return_to_gallery: 'Gallery',
  Next_result: 'Next →',
  
  Permalink: 'View',
  Download: 'Download',
  No_description: '<p><i>No description</i>.</p>',